/*
* @file investmentAnalysis/AnalysisAssets.js
* 复盘分析
*/
import React, { Component, PropTypes } from 'react';
import { Row, Col } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';
import Summary from './Summary';
import OpenPositions from './OpenPositions';
import AccountChart from './AccountChart';

import './accountAssets.less';

const mapStateToProps = ({
	featureList: { currentDataDate, selectedTrader },
	accountAssets: { accountDaily, openPositionList },
}) => ({
	trader: selectedTrader.trader,
	dataDate: moment(currentDataDate).format('YYYY-MM-DD'),
	account: accountDaily,
	openPositionList,
});

const mapDispatchToProps = {
	getAccountDaily: query => ({
		type: 'accountAssets/getAccountDaily',
		payload: query || {},
	}),
	getOpenPositionList: query => ({
		type: 'accountAssets/getOpenPositionList',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class AccountAssets extends Component {
	static propTypes = {
		trader: PropTypes.string.isRequired,
		dataDate: PropTypes.string.isRequired,
	}
	static defaultProps = {

	}
	componentDidMount() {
		this.getData(this.props);
	}
	componentWillReceiveProps(nextProps) {
		if (nextProps.trader !== this.props.trader) {
			this.getData(nextProps);
		}
	}
	getData({ trader, dataDate, getAccountDaily, getOpenPositionList }) {
		getOpenPositionList({ trader });
		getAccountDaily({ trader, dataDate });
	}
	render() {
		const { account, openPositionList } = this.props;
		return (
			<div className="accountAssets" style={{ padding: '20px 12px' }}>
				<Row>
					<Col span="12">
						{ account && <Summary account={account} /> }
						<OpenPositions list={openPositionList} />
					</Col>
					<Col span="12">
						<AccountChart data={openPositionList} />
					</Col>
				</Row>
			</div>
		);
	}
}

export default AccountAssets;
